/*noinspection CssUnknownTarget*/
@import url('https://fonts.googleapis.com/css?family=PT+Mono');

#kalkulator {
    display: grid;
    grid-template:
        "B   B   B   B " 0.5fr
        "IO  IO  IO  IO" 1fr
        "AC  H   M   D " 1fr
        "n   n   n   X " 1fr
        "n   n   n   _ " 1fr
        "n   n   n   P " 1fr
        "F   _0  K   R " 1fr
        /1fr 1fr 1fr 1fr;
    height: 20em;
    width: 20em;
    grid-gap: 0.2em;
}

#IO {
    text-align: right;
    border: none;
    padding: 0.1em 0;
    width: 100%;
    background: #4d4d4c;
    color: #cccccc;
    font-size: 2em;
    /*pointer-events: none;*/
    font-family: "PT Mono", monospace;
}

#Buffer {
    text-align: right;
    border: none;
    padding: 0.1em 0;
    width: 100%;
    background: #636362;
    color: #cccccc;
    font-size: 1em;
    /*pointer-events: none;*/
    grid-area: B;
    font-family: "PT Mono", monospace;
}

#kalkulator .knapp {
    transition: background 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #cccccc;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

#kalkulator .siffer {
    background: #dddddd;
}

#kalkulator .knapp.animert {
    transition: all 0.01s;
    background: #A0A0A0;
}

#IO {
    grid-area: IO;
}

#C {
    grid-area: AC;
}

#Flipp {
    grid-area: F;
}

#Modulus {
    grid-area: M;
}

#Divisjon {
    grid-area: D;
}

#Multiplikasjon {
    grid-area: X;
}

#Subtraksjon {
    grid-area: _;
}

#Addisjon {
    grid-area: P;
}

#Komma {
    grid-area: K;
}

#Regnut {
    grid-area: R;
}

#_0 {
    grid-area: _0;
}

#DEL {
    grid-area: H;
}